<template>
  <div class="about">
    <h1>TodoList - 待办事项</h1>
    <input type="text" @keydown.enter="add" v-model="txt">
    <input type="button" value="搜索" @click="search">
    <br>
    <input type="checkbox" v-model="allCheck">全选
    <br>
    <ul>
      <li v-for="item in newList" :key="item.id">
        <input type="checkbox" v-model="item.checked">
        <input v-if="item.isSet" type="text" v-model="item.title" @blur="item.isSet = false">
        <span v-else @click="item.isSet = true">{{ item.title }}</span>
        <input type="button" value="删除" @click="del(item.id)">
      </li>
    </ul>
  </div>
</template>

<style>
</style>

<script>
export default {
  data(){
    return {
      // 总数据，原始数据
      list: [],
      // 渲染的数据
      newList: [],
      // 输入框的值
      txt: ""
    }
  },
  methods:{
    // 添加数据
    add(){
      // 为空时不添加
      if(this.txt === "") return;
      // 向总数据中添加本次输入框内容
      this.list.push({
        id: Date.now() + "" + Math.random(),
        title: this.txt,
        checked: false,
        isSet: false
      })
      // 清空输入框
      this.txt = "";
      // 将总数据，同步到渲染数据
      this.newList = this.list;
    },
    search(){
      // 从总数据上进行搜索，将搜索出的数据存储到渲染数据内
      this.newList = this.list.filter(val=>val.title.includes(this.txt));
    },
    del(id){
      // 根据传入的id找到要删除数据的索引
      let i = 0;
      this.list.some((val,idx)=>{
        i = idx;
        return val.id === id;
      })
      // 删除总数据中对应的数据
      this.list.splice(i, 1);
    }
  },
  computed:{
    allCheck:{
      get(){
        // 根据渲染数据的选中状态，计算是否需要全选
        return this.newList.every(val=>val.checked);
      },
      set(val){
        // 当改变全选状态时，同步更新渲染数据的选中状态
        this.newList.forEach(item=>{
          item.checked = val;
        })
      }
    }
  }
}
</script>